import React, {Component} from 'react';
import './loginAndRegister.css'
import backImg from '../../../img/loginBackImg.jpg'
import axios from "axios";
import {useRouteMatch} from  "react-router-dom";

class LoginRegister extends Component {

    usernameRef = React.createRef();
    passwordRef = React.createRef();

    login = ()=>{
        const token = localStorage.getItem('SUCCESS-TOKEN');
        // const token = "";
        // this.setState({token})
        console.log("token= "+token)

        axios.request({
            url:"/scms-edit/login",
            method:"post",
            data:{
                username: this.usernameRef.current.value,
                password: this.passwordRef.current.value,
            },
            headers:{
                'SUCCESS-TOKEN': token==null?"":token
            }
        }).then(response =>{
            localStorage.setItem('SUCCESS-TOKEN',response.data.result)
            // console.log("response.data.result= "+response.data.result)
            // const token1 = localStorage.getItem('SUCCESS-TOKEN');
            // console.log("token1= "+token1)
            window.location.href="/home";
        }, reason => {
            window.location.href="/login";
        })

    }

    render() {
        return (
            <div className="login_register" style={{backgroundImage:backImg}}>
                <div className="login_box">
                    <div className="img_box">
                        {/*<span className="img_span">*/}
                        {/*    <img />*/}
                        {/*</span>*/}
                        <span style={
                            {fontSize:36,
                            fontWeight:"bold"
                            }
                        }>欢迎登录</span>
                    </div>
                    <div className="input_list">
                        <div className="input_item">
                            <span className="text_title">用户名:</span>
                            <input type="text" className="input" ref={this.usernameRef}/>
                        </div>
                        <div className="input_item">
                            <span className="text_title" >密码:</span>
                            <input type="password" className="input" ref={this.passwordRef}/>
                        </div>
                    </div>

                    <div className="btn_list">
                        <button className="login_btn" onClick={this.login}>登录</button>
                        {/*<button className="login_btn">注册</button>*/}
                    </div>
                </div>
            </div>
        );
    }
}

export default LoginRegister;